<template>
  <div class='content-detail-container'>
    <el-row>

      <el-col :span="24"
              v-for="item in contentDetail"
              :key="item.content_id">
        <div class="detail-container">
          <span>{{item.content_name}}</span>
          <div class="detail"
               v-if="item.control_type==='1' || item.control_type==='2'">
            <p v-if="item.real_value">{{ item.real_value[0].value||''}}</p>
          </div>
          <div class="detail"
               v-if="item.control_type==='3'">
            <p v-if="item.current_value">{{item.current_value}}</p>
            <p v-else>暂无选项</p>
          </div>
          <div class="detail"
               v-if="item.control_type==='15'">
            <p v-if="item.real_value && item.real_value[0]!==''">{{item.real_value[0]}}</p>
            <p v-else>暂无选项</p>
          </div>
          <div class="detail"
               v-if="item.control_type==='6'">
            <p v-if="item.real_value && item.real_value[0].value==='0'">不合格</p>
            <p v-if="item.real_value && item.real_value[0].value==='1'">合格</p>
          </div>
          <div class="detail"
               v-if="item.control_type==='7' || (item.control_type==='22' && item.control_cfg.up_type==='2')">
            <el-image v-for="(image,idx) in item.real_value"
                      :key="idx"
                      :zIndex="9999"
                      fit="cover"
                      style="width: 120px;height: 120px;margin-right: 10px;"
                      :preview-src-list="item.real_value"
                      :src="image">
            </el-image>
          </div>
          <!-- 单行文本、多行文本、数字框、 位置选择器-->
          <div class="detail"
               v-if="item.control_type==='16' || item.control_type==='17' 
               || item.control_type==='18' || item.control_type==='27' || item.control_type==='36'">
            <p v-if="item.real_value">{{item.real_value[0]}}</p>
          </div>
          <!-- 时间选择 -->
          <div class="detail"
               v-if="item.control_type==='19'">
            <p class="time">
              <span v-if="item.real_value && item.real_value[0]">{{ item.real_value[0]}}</span>
              <span v-if="item.real_value && item.real_value[1]">{{ '- ' +item.real_value[1]}}</span>
            </p>

          </div>
          <!-- 标签选择、选择控件 -->
          <div class="detail"
               v-if="item.control_type==='20' || item.control_type==='21'">
            <p v-for="detail in item.real_value"
               :key="detail.value">{{detail.value}}</p>
          </div>
          <!-- 上传控件-视频及录音 -->
          <div class="detail"
               v-if="item.control_type==='22' && (item.control_cfg.up_type==='4' || item.control_cfg.up_type==='5')">
            <video v-for="(video) in item.real_value"
                   :key="video.url"
                   width="200"
                   :height="item.control_cfg.up_type==='4'?'200':'50'"
                   controls>
              <source :src="video.url"
                      type="video/mp4">
              <source :src="video.url">
            </video>
          </div>
          <!-- 上传控件-文件 -->
          <div class="detail"
               v-if="item.control_type==='22' && item.control_cfg.up_type==='1'">
            <span v-for="file in item.real_value"
                  @click="downloadFile(file)"
                  :key="file.url"
                  class="file">{{file.name}}</span>
          </div>
          <!-- 人员选择控件 -->
          <div class="detail"
               v-if="item.control_type==='28'">
            <p class="time user">
              <span v-for="user in item.real_value"
                    :key="user.user_id">{{user.user_name}}</span>
            </p>
          </div>
          <!-- 计分控件 -->
          <div class="detail"
               v-if="item.control_type==='25'">
            <p v-if="item.real_value">{{item.real_value[0].real_value}}</p>
          </div>
          <!-- 组合控件 -->
          <div class="detail"
               v-if="item.control_type==='26'">
            <span class="file"
                  @click="showDetail(item)">显示详情</span>
          </div>
          <!-- 注释控件 -->
          <div class="detail"
               v-if="item.control_type==='24'">
            <p>{{item.control_cfg.content}}</p>
          </div>
          <!-- 新增控件-29-32 -->
          <div class="detail"
               v-if="item.control_type==='29' || item.control_type==='30' || item.control_type==='31' || item.control_type==='32'">
            <p v-if="item.real_value">{{item.real_value[0].value}}</p>
          </div>
          <!-- 天气组件 -->
          <div class="detail"
               v-if="item.control_type==='34'">
            <div class="content">
              <div class="morning item">
                <p class="title">上午</p>
                <h2 class="temperature">{{item.real_value?item.real_value[0].am.temp:''}}℃</h2>
                <ul class="detail">
                  <li class="detail-item">
                    <img src="@/assets/img/weather-ic.png"
                         alt="">
                    <div class="info">
                      <span>天气</span>
                      <span>{{item.real_value?item.real_value[0].am.weather:''}}</span>
                    </div>
                  </li>
                  <li class="detail-item">
                    <img src="@/assets/img/wind-ic.png"
                         alt="">
                    <div class="info">
                      <span>风向</span>
                      <span>{{item.real_value?item.real_value[0].am.winddirect:''}}</span>
                    </div>
                  </li>
                  <li class="detail-item">
                    <img src="@/assets/img/wind2-ic.png"
                         alt="">
                    <div class="info">
                      <span>风力</span>
                      <span>{{item.real_value?item.real_value[0].am.windpower:''}}</span>
                    </div>
                  </li>
                </ul>
              </div>
              <div class="afternoon item">
                <p class="title">下午</p>
                <h2 class="temperature">{{item.real_value?item.real_value[0].pm.temp:''}}℃</h2>
                <ul class="detail">
                  <li class="detail-item">
                    <img src="@/assets/img/weather-ic.png"
                         alt="">
                    <div class="info">
                      <span>天气</span>
                      <span>{{item.real_value?item.real_value[0].pm.weather:''}}</span>
                    </div>
                  </li>
                  <li class="detail-item">
                    <img src="@/assets/img/wind-ic.png"
                         alt="">
                    <div class="info">
                      <span>风向</span>
                      <span>{{item.real_value?item.real_value[0].pm.winddirect:''}}</span>
                    </div>
                  </li>
                  <li class="detail-item">
                    <img src="@/assets/img/wind2-ic.png"
                         alt="">
                    <div class="info">
                      <span>风力</span>
                      <span>{{item.real_value?item.real_value[0].pm.windpower:''}}</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <ReportFormDialog :dialogVisible.sync="dialogVisible"
                      :dialogForm="dialogForm"></ReportFormDialog>
  </div>
</template>
<script>

import ReportFormDialog from '@/pages/ConfigCenter/CommonCheck/components/ReportFormDialog'
export default {
  data () {
    return {
      // 组合控件子控件显示弹框是否可见
      dialogVisible: false,
      dialogForm: []
    }
  },
  props: {
    contentDetail: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    ReportFormDialog
  },
  methods: {
    // 显示组合控件中的子控件
    showDetail (detail) {
      this.dialogForm = detail.control_children[0].list
      this.dialogVisible = true
    },
    // 下载文件
    downloadFile (file) {
      let url = file.url
      var alink = document.createElement('a')
      alink.href = url
      alink.target = '_blank'
      alink.download = ''
      alink.click()
    },

  },
  created () {
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.content-detail-container {
  .detail-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    span {
      color: #666;
      margin-right: 20px;
    }
    .file {
      color: #1890ff;
      cursor: pointer;
    }
    img {
      width: 200px;
      height: 200px;
    }
    video {
      margin-right: 20px;
    }
    .time {
      span {
        color: #000;
        font-weight: bold;
        margin-right: 0;
      }
    }
    .user {
      span {
        margin-right: 10px;
      }
    }
    .detail {
      color: #000;
      font-weight: bold;
      line-height: 20px;
      flex: 1;
      .content {
        height: 84%;
        width: 95%;
        display: flex;
        justify-content: space-between;

        .item {
          border-radius: 4px;
          width: calc((100% - 8px) / 2);
          padding: 16px;
          &.morning {
            background: rgb(24, 144, 255);
          }
          &.afternoon {
            background: rgb(131, 196, 98);
          }
          .title {
            font-size: 14px;
            color: #fff;
          }
          .temperature {
            font-size: 32px;
            color: rgba(255, 173, 11, 1);
            text-align: center;
          }
          .detail {
            margin-top: 20px;
            .detail-item {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              height: 45px;
              border-bottom: 1px solid rgba(201, 223, 243, 0.1);
              img {
                width: 32px;
                height: 32px;
              }
              .info {
                margin-left: 16px;
                display: flex;
                flex: 1;
                justify-content: space-between;
                align-items: center;

                span {
                  font-size: 14px;
                  color: rgba(255, 255, 255, 0.85);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>